<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>JS 数组</h1>
    <hr>

    <ul id="nav">
        <li>小黄瓜</li>
        <li>小苦瓜</li>
        <li>小丝瓜</li>
        <li>小菊花</li>
        <li>小樱桃</li>
        <li>小如花</li>
    </ul>

    <li>大西瓜</li>

    <script>
        var nav = document.getElementById('nav');
        var lis = nav.getElementsByTagName('li');
        console.log(lis);
        console.log(lis.length);

        // for
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.border = '1px solid #f00';
        }

        // for in
        for (var i in lis) {
            // lis[i].style.backgroundColor = '#feeeed';
            console.log(i + ':' + lis[i]);
        }


    </script>
</body>
</html>